<template>
  <div>
    <el-row>
      <h1 align="left">{{currentUrl}}</h1>
    </el-row>
    <hr>
    <el-tabs tab-position="left" type="border-card">
      <el-tab-pane label="请求参数">
        <tree-table :data="param_content.data" :columns="columns" border/>
      </el-tab-pane>
      <el-tab-pane label="返回值">
        <tree-table :data="result_content.data" :columns="columns" border/>
      </el-tab-pane>
      <el-tab-pane label="其他相关">
        <el-card shadow="hover" v-for="info in other_info" v-if="info" :key="info.key">
          {{info}}
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="注释" align="left">
        <el-card label="注释内容" v-html="docComment">
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="相关数据库">
        <el-table
          :data="sqlTable">
          <el-table-column
            prop="name"
            label="表名">
          </el-table-column>
          <el-table-column
            prop="operationType"
            label="操作类型">
          </el-table-column>
          <el-table-column
            label="操作">
            <template slot-scope="scope">
              <el-button type="text" size="small" v-on:click="show_raw_sql(scope.row)">原始内容</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-dialog title="原始内容" :visible.sync="dialogFormVisible">
          <el-card shadow="hover" v-for="info in rawSql" :key="info.key" align="left">
            <pre v-html="info"></pre>
          </el-card>
          <div slot="footer" class="dialog-footer">
            <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
          </div>
        </el-dialog>
      </el-tab-pane>
      <el-tab-pane label="问题">
        <QuestionTable :current-url="currentUrl" @need_fresh="update_data(currentUrl)"></QuestionTable>
      </el-tab-pane>
      <el-tab-pane label="请求记录"><AskList :current-url="currentUrl"></AskList></el-tab-pane>
      <el-tab-pane label="控制">
        <el-row>
          <el-button type="primary" plain @click="rebuild_doc()">重新构建</el-button>
          <el-tooltip class="item" effect="dark" :content="'在批量操作中忽略这个API'" placement="top">
            <el-button type="warning" plain @click="set_ignore()"><span v-if="is_ignore">取消</span>忽略</el-button>
          </el-tooltip>
          <el-tooltip class="item" effect="dark" :content="'当前有'+askCount+'个请求'" placement="top">
            <el-button type="warning" plain @click="show_box()">清理请求</el-button>
          </el-tooltip>
        </el-row>
      </el-tab-pane>

    </el-tabs>
  </div>
</template>

<script>
import axios from 'axios';
import treeTable from '../components/TreeTable/index.vue';
import QuestionTable from '../components/QuestionTable.vue';
import AskList from '../components/AskList.vue';

export default {

  components: {
    QuestionTable,
    treeTable,
    AskList,
  },
  data() {
    return {
      currentUrl: 'url',
      docComment: '',
      other_info: [],
      askCount: 0,
      columns: [{ text: '名称(路由)', value: 'name' }, { text: '类型', value: 'type', width: '50px' }, {
        text: '是否必要',
        value: 'necessary',
        width: '60px',
      }, { text: '取值类型', value: 'rangeType', width: '70px' }, { text: '取值范围', value: 'range' }, {
        text: '组',
        value: 'group',
        width: '40px',
      }],
      param_content: {
        data: [],
      },
      result_content: {
        data: [],
      },
      sqlTable: [],
      rawSql: [],
      dialogFormVisible: false,
      is_ignore: false,
    };
  },
  created() {
    this.update_data(this.$route.query.url);
  },
  methods: {
    update_data(url) {
      this.currentUrl = url;
      axios.get('/api/doc/param', { params: { url: this.currentUrl } }).then((res) => {
        this.param_content.data = res.data;
      });
      axios.get('/api/doc/result', { params: { url: this.currentUrl } }).then((res) => {
        this.result_content.data = res.data;
      });
      axios.get('/api/doc/addition_info', { params: { url: this.currentUrl } }).then((res) => {
        this.askCount = res.data[1];
        this.other_info = res.data[0];
        console.log(res.data);
      });
      axios.get('/api/doc/comment', { params: { url: this.currentUrl } }).then((res) => {
        this.docComment = res.data;
      });
      axios.get('/api/doc/sql', { params: { url: this.currentUrl } }).then((res) => {
        this.sqlTable = res.data;
      });
      axios.get('/api/doc/set_ignore', { params: { url: this.currentUrl } }).then(
        (res) => { this.is_ignore = res.data; },
      );
    },
    show_raw_sql(row) {
      axios.get('/api/doc/rawSql', { params: { url: this.currentUrl, name: row.name, operationType: row.operationType } }).then((res) => {
        this.rawSql = res.data;
        this.dialogFormVisible = true;
      });
    },
    show_box() {
      this.$prompt('请输入保留的请求数量【保留更新的】', '清理', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\d+/,
        inputErrorMessage: '请输入数字',
      }).then(({ value }) => {
        let tv = value;
        if (typeof (value) === 'undefined') {
          tv = 10;
        }
        axios.get('/api/doc/clean_ask', { params: { url: this.currentUrl, count: tv } }).then(
          () => { this.update_data(this.currentUrl); },
        );
      });
    },
    rebuild_doc() {
      axios.get('/api/model/rebuild/rebuild/one', { params: { url: this.currentUrl } }).then((key) => {
        this.$store.state.progress_value.append([key, `[rebuild]${this.currentUrl}`]);
      });
    },
    set_ignore() {
      const self = this;
      axios.get('/api/doc/set_ignore', { params: { url: this.currentUrl, is_ignore: this.is_ignore } }).then(
        (res) => { self.is_ignore = res.data; },
      );
    },
  },
  watch: {
    $route(to) {
      this.update_data(to.query.url);
    },
  },
};
</script>

<style scoped>

</style>
